<script setup>
import ProductItem from './productItem.vue';
import { request } from "@/utils/request";
import api from '@/components/canvasShow/config/api'
import { ref, onMounted, toRefs, watch } from 'vue';
import funMixin from '@/components/canvasShow/config/mixin/funMixin'
import {VUE_APP_STATIC_URL} from "@/config/api";
import { showLoading, hideLoading } from "@/utils/plugIn/globalLoading.js";
const { jumpLink, jumpProductDetail } = funMixin()

const loading = ref(false)
const noMore = ref(false)
const productList = ref([]);
const pageNo = ref(1)
const total = ref(0)

onMounted(()=>{
  getProductsList()
})

// 获取商品列表
function getProductsList () {
  loading.value = true
  let params = {
    page: 1,
    pageSize: pageNo.value===1?9:10,
  }
  let url = api.getProducts
  request(url,params,"GET").then(response=>{
    const res = response.data
    if(res.list.length > 0){
      productList.value = productList.value.concat(res && res.list || [])
    } else {
      // 没数据就占位
      if(pageNo.value === 1){
        productList.value = [{},{}]
      } else {
        noMore.value = true
      }
    }
  }).finally(() => {
    // hideLoading()
    loading.value = false
  })
}

function load () {
  console.log('load','111')
  if(!loading.value && !noMore.value){
    pageNo.value ++
    getProductsList()
  }
}
defineExpose({
  load
})
</script>

<template>
  <div class="product-group">
    <div class="top">
      <div class="worth-buying-top">
        <div class="title">
          <div class="h3"><img class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/zhidemaijingxuan.png`" alt="" /></div>
          <div class="h4"><img class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/biyanmaibuhuicuo.png`" alt="" /></div>
        </div>
      </div>
    </div>

    <div class="list">
      <swiper
        class="banner item"
        :circular="true" :indicator-dots="false" :autoplay="true"
      >
        <swiper-item class="banner-item">
          <image class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/banner4.png`" alt="" />
        </swiper-item>
        <swiper-item class="banner-item">
          <image class="img" :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/home/banner5.png`" alt="" />
        </swiper-item>
      </swiper>
      <div v-for="(item,index) in productList" :key="index" class="item" @click="jumpProductDetail(item)">
        <ProductItem :item="item"  v-if="item.productId"/>
        <div v-else class="skeleton-box" />
      </div>
    </div>
    <view>
      <slide-loading />
      <view class="reachBottom" v-if="noMore">
        <image class="reach-icon" :src="`${VUE_APP_STATIC_URL}ui-static/img/reachBottom.png`" mode="widthFix"></image>
        <text class="reach-text">这里到底了哦~~</text>
      </view>
    </view>
  </div>
</template>

<style scoped lang="scss">
.product-group{
  padding:0 30rpx 40rpx;
  overflow: hidden;
  .top{
    margin-bottom: 22rpx;
    .title{
      display: flex;
      align-items: flex-end;
      .h3{
        font-weight: bold;
        font-size: 36rpx;
        color: #3B3B3B;
        margin-right: 8rpx;
      }
      .h4{
        font-size: 24rpx;
        color: #6C6C6C;
      }
    }
    .tab{
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      .tab-item{
        display: flex;
        align-items: center;
        margin-left: 15rpx;
        padding:12rpx 16rpx;
        cursor: pointer;
        background: #FFFFFF;
        border-radius: 8rpx;
        font-size: 24rpx;
        color: #6C6C6C;
        white-space: nowrap;
        &:first-child{
          margin-left: 0;
        }
        &.on,&:hover{
          background: #FFE9CC;
          color: #FF5000;
        }
        .name{
          font-size: 16rpx;
          color: #6C6C6C;
        }
      }
    }
  }
  .worth-buying-top{
    .title{
      display: flex;
      align-items: flex-end;
      .h3{
        margin-right: 13rpx;
        .img{
          width: auto;
          height: 35rpx;
        }
      }
      .h4{
        .img{
          width: auto;
          height: 23rpx;
        }
      }
    }
  }
  .list{
    display: flex;
    flex-wrap: wrap;
    margin-left: -18rpx;
    .item{
      width: 336rpx;
      margin-left: 18rpx;
      .skeleton-box{
        width: 100%;
        height: 534rpx;
        background-color: #FFFFFF;
      }
      &.banner{
        height: 534rpx;
        .banner-item{
          .img{
            width: 336rpx;
            height: 534rpx;
          }
        }
      }
    }
  }
}
</style>